<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			*{
				margin:0;
				padding:0;
			}
			div{
				width:200px;
				height:100px;
				background-color:red;
				margin: 100px auto;
				margin-bottom: 20px;
				border:2px solid black;
				text-align:center;
				line-height:100px;
			}
	        button{
				width:80px;
				height:30px;
				background-color:cadetblue;
				border: 1px solid black;
				margin-left: 720px;
				cursor:pointer;
			}
		</style>
		<script type="text/javascript">
			window.onload = function(){
				var oDiv = document.getElementById("div1");
				var oBtn = document.getElementById("btn1");
				oBtn.onclick = function(){
				    oDiv.style.color = "blue";
					oDiv.style.width = "400px";
					oDiv.style.height = "200px";
					oDiv.style.fontSize = "38px";
					oDiv.style.borderRadius = "10px";
					oDiv.innerHTML = "www.wuhao.com";
				} 
			}
			
		</script>
	</head>
	<body>
		<div id="div1">Hello World</div>
		<button id="btn1">change</button>
	</body>
</html>
